<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  getProjectDetailInfo
} from "@/api/file";
import { useRoute } from "vue-router";
import { ElMessage, ElTable } from "element-plus";
defineOptions({
  name: "taskinfo"
});

const route = useRoute();
const id = ref("");
const projectName = ref("");
const searchContent = ref("");
const searchRunUser = ref("");
const tableData = ref([]);
const loading = ref(false);

const pagination = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10,
})
const getStatusColor = (status) => {
  switch (status) {
    case 'running':
      return 'green';   // 运行中 -> 绿色
    case 'stopped':
      return 'red';     // 停止 -> 红色
    case 'completed':
      return 'blue';    // 完成 -> 蓝色
    case 'failed':
      return 'red';   //   失败 -> 绿色
    case 'timeout':
      return 'yellow';   //   失败 -> 绿色
    default:
      return 'gray';    // 默认 -> 灰色
  }
}
const getList = async () => {
  try {
    loading.value = true;
    const res = await getProjectDetailInfo({
      projectId: id.value,
      projectName: projectName.value,
      runUser: searchRunUser.value,
      runScenarios: searchContent.value,
      pageNum: pagination.value.pageNum,
      pageSize: pagination.value.pageSize
    });
    loading.value = false;
    if (res.success) {
      tableData.value = res.data.list;
      pagination.value.total = res.data.total;
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val
  getList()
};
const handleCurrentChange = (val: number) => {
  pagination.value.pageNum = val
  getList()
};

onMounted(async () => {
  id.value = route.query.id as string
  projectName.value = route.query.projectName as string
  await getList();
});




</script>


<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>历史执行记录-{{ projectName }}</span>
      </div>
    </template>
    <div class="action-bar">
      <div class="flex justify-between w-full">
        <el-space>
          <el-form-item label="执行人：" style="margin-bottom: 0;">
            <el-input v-model="searchRunUser" clearable placeholder="请输入执行人" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="执行内容" style="margin-bottom: 0;">
            <el-input v-model="searchContent" clearable placeholder="请输入内容" style="width: 200px;" />
          </el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-space>
      </div>
    </div>
    <el-table ref="singleTableRef" v-loading="loading" :data="tableData" highlight-current-row stripe border
      style="width: 100%">
      <el-table-column type="index" width="55" label="序号" />
      <!-- <el-table-column prop="projectId" width="120" label="项目ID" /> -->
      <el-table-column prop="runUser" width="220" label="执行人" sortable />
      <el-table-column prop="runIp" width="280" label="执行IP" sortable />
      <el-table-column prop="slaverIp" width="280" label="负载机IP" sortable />
      <el-table-column prop="runTime" label="执行时间" sortable />
      <el-table-column prop="status" label="状态" sortable>
        <template #default="scope">
          <span :style="{
            width: '10px',
            height: '10px',
            borderRadius: '50%',
            display: 'inline-block',
            marginRight: '8px',
            backgroundColor: getStatusColor(scope.row.status)
          }"></span>
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column prop="runScenarios" label="执行内容" />
    </el-table>
    <div class="flex justify-end mt-[10px]">
      <el-pagination background layout="sizes, prev, pager, next, total" :total="pagination.total" :default-page-size="10"
        :current-page="pagination.pageNum" @update:current-page="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-action {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
